<template>
  <div class="dataset">
    <div class="dataset__header">Certainly! Please choose the data source for widget creation.</div>
    <el-button size="mini"
               style="margin-top:10px"
               @click="visible = true">Select Dataset</el-button>
    <el-dialog title="Select Dataset"
               :visible.sync="visible"
               append-to-body
               lock-scroll
               custom-class="select-dataset  flex flex-col"
               :destroy-on-close="true">
      <MediaDataset v-if="visible"
                    @event:add="onAdd" />
    </el-dialog>
  </div>
</template>

<script>
import MediaDataset from './media-dataset.vue'
import { fetcDatasetData } from '@/api/new'

export default {
  name: 'Dataset',
  components: {
    MediaDataset
  },

  data () {
    return {
      visible: false,
    }
  },
  methods: {
    async getDatasetData (id) {
      const { data: response } = await fetcDatasetData({
        id,
        filter: "limit 20",
        dataFilter: false
      })
      return response.data || []
    },


    async onAdd (data = {}) {
      try {
        this.visible = false
        this.$store.state.ai.loading = true
        const { id, name } = data
        const dataset = await this.getDatasetData(id)
        this.$store.commit('SET_CONTENT',
          {
            type: 'GPT',
            name: "Grid",
            dataset: true,
            options: {
              title: `You have selected the dataset ’${name}‘, Please enter your requirements to proceed.`,
              id: id,
              dataset
            },
          },
        )
      } catch (error) {
      } finally {
        this.$store.state.ai.loading = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.dataset {
  &__header {
    color: #333;
    font-weight: 500;
  }
}
</style>
<style lang="scss">
.select-dataset {
  width: 90%;
  min-width: 800px;
  height: 80%;
  max-height: 850px;
  margin-top: 10vh !important;
  & > .el-dialog__body {
    flex: 1;
    height: 0;
    display: flex;
    flex-direction: column;
    padding: 0 20px;
  }
}
</style>